/* ------------------------------------------------------------------------------
*
*  # Form related components
*
*  Overrides for bootstrap form related components
*
*  Version: 1.1
*  Latest update: Mar 10, 2015
*
* ---------------------------------------------------------------------------- */

/* Form controls
----------------------------------*/

// Normalize non-controls
// -------------------------

// Legend
legend {
  font-size: @font-size-small;
  padding-top: (@line-height-computed / 2);
  padding-bottom: (@line-height-computed / 2);
  text-transform: uppercase;

  // Remove top padding in first items
  fieldset:first-child & {
    &:first-child {
      padding-top: 0;
    }
  }

  // Control arrow
  .control-arrow {
    float: right;
    color: @text-muted;

    &:hover {
      color: @text-color;
    }
  }
}

// Label
label {
  margin-bottom: @padding-base-vertical;
  font-weight: 400;
}

// Normalize form controls
// -------------------------

// Multiple select
select[multiple],
select[size] {
  height: 200px;
  padding: @padding-base-vertical;

  // Option
  option {
    padding: @padding-base-vertical @padding-base-horizontal;
    border-radius: @input-border-radius;

    + option {
      margin-top: 1px;
    }
  }
}

// Focus for file, radio, and checkbox
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 0;
}

// Common form controls
// -------------------------

.form-control {
  .box-shadow(none);

  // Remove outline and shadow on focus
  &:focus {
    outline: 0;
    .box-shadow(none);
  }
  &[class*=bg-]:focus {
    border-color: transparent;
  }

  // Placeholder in colored input
  &[class*=bg-] {
    .placeholder(@input-placeholder-light);
  }
}

// Form controls options
// -------------------------

// Rounded input
.input-rounded {
  border-radius: 100px;
}

// Roundless input
.input-roundless {
  border-radius: 0;
}

// Transparent input
.form-control-unstyled {
  padding: 0;
  border: 0;
  background-color: transparent;
}

// Remove inputs shadow in mobile browsers 
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="url"],
input[type="tel"],
textarea {
  -webkit-appearance: none;
}

/* Form components
----------------------------------*/

// Form groups
// -------------------------

.form-group {
  margin-bottom: @form-group-margin-bottom;
  position: relative;

  // Form group nesting
  .form-group {
    &:last-child {
      margin-bottom: 0;
    }
  }

  // Vertical spacing for stacked columns
  //
  // When nested form groups stack, add top margin for each column, except first.
  @media (max-width: @screen-sm-max) {
    div[class*="col-md-"]:not(.control-label) + div[class*="col-md-"] {
      margin-top: @form-group-margin-bottom;
    }
  }
  @media (max-width: @screen-md-max) {
    div[class*="col-lg-"]:not(.control-label) + div[class*="col-lg-"] {
      margin-top: @form-group-margin-bottom;
    }
  }
  @media (max-width: @screen-xs-max) {
    div[class*="col-sm-"]:not(.control-label) + div[class*="col-sm-"] {
      margin-top: @form-group-margin-bottom;
    }
  }
}

// Floating labels
// -------------------------

.form-group-material {

  // Labels
  > .control-label {
    position: relative;
    top: @padding-base-vertical;
    .opacity(0);

    // Top spacing for contextual icon
    ~ .form-control-feedback {
      top: (@line-height-computed + @padding-base-vertical);
    }
  }

  // Display label
  > .control-label.is-visible {
    top: 0;
    .opacity(1);
  }

  // Label animation
  > .control-label.animate {
    .transition(all linear 0.1s);
  }
}

// Checkboxes and radios
// -------------------------

// Containers
.radio,
.checkbox {

  // Make them vertically centered depending on the base input height
  margin-top: ((@input-height-base - @line-height-computed) / 2);
  margin-bottom: ((@input-height-base - @line-height-computed) / 2);

  // Inner label element
  label {
    padding-left: (@checkbox-size + @content-padding-small);
  }
}

// Checkbox and radio inputs
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
  margin-left: 0;
  left: 0;
}

// Siblings
.radio + .radio,
.checkbox + .checkbox {
  margin-top: 0;
}

// Radios and checkboxes on same line
.radio-inline,
.checkbox-inline {
  position: relative;
  padding-left: (@checkbox-size + @content-padding-small);
}

//
// Right position
//

// Radio
.radio-right {
  &.radio-inline,
  label {
    padding-left: 0;
    padding-right: (@checkbox-size + @content-padding-small);
  }

  input[type="radio"] {
    left: auto;
    right: 0;
  }
}

// Checkbox
.checkbox-right:extend(.radio-right all) {
  &.checkbox-inline,
  label {
    &:extend(.radio-right.radio-inline);
  }
  input[type="checkbox"] {
    &:extend(.radio-right input[type="radio"]);
  }
}

// Inline siblings
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
  margin-left: @content-padding-base;
}

// Disabled state
.radio,
.checkbox {
  &,
  &-inline {
    &.disabled,
    fieldset[disabled] & {
      color: @gray-light;
    }
  }
}

/* Form control sizing
----------------------------------*/

// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.

// XLarge
.input-xlg {
  .input-size(@input-height-xlarge; @padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-xlarge; @line-height-xlarge; @input-border-radius-large);
}

.form-group-xlg {
  .form-control {
    .input-size(@input-height-xlarge; @padding-xlarge-vertical; @padding-xlarge-horizontal; @font-size-xlarge; @line-height-xlarge; @input-border-radius-large);
  }
  .form-control-static {
    height: @input-height-xlarge;
    min-height: (@line-height-computed + @font-size-xlarge);
    padding: @padding-xlarge-vertical @padding-xlarge-horizontal;
    font-size: @font-size-xlarge;
    line-height: @line-height-xlarge;
  }
}

// Mini
.input-xs {
  .input-size(@input-height-mini; @padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
}

.form-group-xs {
  .form-control {
    .input-size(@input-height-mini; @padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @input-border-radius-small);
  }
  .form-control-static {
    height: @input-height-mini;
    min-height: (@line-height-computed + @font-size-small);
    padding: @padding-xs-vertical @padding-xs-horizontal;
    font-size: @font-size-small;
    line-height: @line-height-small;
  }
}

/* Form helpers
----------------------------------*/

// Form control feedback states
// -------------------------

// Default right icon position
.has-feedback {

  // Ensure icons don't overlap text
  .form-control {
    padding-right: @input-height-base;

    &.input-xlg {
      padding-right: @input-height-xlarge;
    }

    &.input-lg {
      padding-right: @input-height-large;
    }

    &.input-sm {
      padding-right: @input-height-small;
    }

    &.input-xs {
      padding-right: @input-height-mini;
    }
  }
}

// Feedback icon
.form-control-feedback {
  width: @input-height-base + 2;
  color: @input-color;
  z-index: 3;

  // Change color if comes after colored input
  input[class*=bg-] + & {
    color: #fff;
  }
}

// Left icon position
.has-feedback-left {
  .form-control {
    padding-right: @padding-base-horizontal;
    padding-left: @input-height-base;

    &.input-xlg {
      padding-right: @padding-xlarge-vertical;
      padding-left: @input-height-xlarge;
    }

    &.input-lg {
      padding-right: @padding-large-horizontal;
      padding-left: @input-height-large;
    }

    &.input-sm {
      padding-right: @padding-small-horizontal;
      padding-left: @input-height-small;
    }

    &.input-xs {
      padding-right: @padding-xs-horizontal;
      padding-left: @input-height-mini;
    }
  }
  .form-control-feedback {
    right: auto;
    left: 0;
  }
}

//
// Sizing
//

// XLarge
.input-xlg + .form-control-feedback,
.form-group-xlg > .form-control-feedback {
  width: @input-height-xlarge + 2;
  height: @input-height-xlarge;
  line-height: @input-height-xlarge;
}

// Large
.input-lg + .form-control-feedback,
.form-group-lg > .form-control-feedback {
  width: @input-height-large + 2;
}

// Small
.input-sm + .form-control-feedback,
.form-group-sm > .form-control-feedback {
  width: @input-height-small + 2;
}

// Mini
.input-xs + .form-control-feedback,
.form-group-xs > .form-control-feedback {
  width: @input-height-mini + 2;
  height: @input-height-mini;
  line-height: @input-height-mini;
}

//
// Feedback states
//

.has-success,
.has-warning,
.has-error {
  .form-control:focus {
    .box-shadow(none);
  }
}

// Help text
// -------------------------

// Block helpers
.help-block {
  color: @text-muted;
  font-size: @font-size-small;
  margin-top: @padding-base-vertical;
  margin-bottom: @padding-base-vertical;
}

// Inline helpers
.help-inline {
  display: inline-block;
  color: @text-muted;
  font-size: @font-size-small;
  margin-top: (@padding-base-vertical + 1);
  margin-bottom: (@padding-base-vertical + 1);

  // Remove gutter if inside column
  .form-horizontal .form-group > div[class*="col-"] + & {
    margin-left: (@grid-gutter-width / 2);
    margin-right: (@grid-gutter-width / 2);
  }

  // Inline help works only on large screens
  @media (min-width: @screen-md) {
    display: inline-block;
    margin-top: (@padding-base-vertical + 1);
    margin-bottom: (@padding-base-vertical + 1);
    vertical-align: top;

    // Inline text helper
    &:not(.label) {
      color: @text-muted
    }

    // In large group
    .form-group-lg & {
      margin-top: (@padding-large-vertical + 1);
    }

    // In small group
    .form-group-sm & {
      margin-top: (@padding-small-vertical + 1);
    }

    // In mini group
    .form-group-xs & {
      margin-top: (@padding-xs-vertical + 1);
    }
  }
}

/* Form layouts
----------------------------------*/

// Inline forms
// -------------------------

.form-inline {
  @media (min-width: @screen-sm-min) {

    // Inline-block all the things for "inline"
    .form-group {
      & + .form-group {
        margin-left: @content-padding-base;
      }

      // Label setup
      > label {
        margin-right: @element-horizontal-spacing;
        position: relative;
        top: 1px;
      }
    }
  }
}

// Horizontal forms
// -------------------------

.form-horizontal {

  // Make form groups behave like rows
  .form-group {

    // Nesting
    .form-group {
      margin-left: 0;
      margin-right: 0;
    }
  }

  // Control label
  @media (min-width: @screen-sm-min) {
    .control-label {
      padding-bottom: @padding-base-vertical;
      padding-top: 0;

      &:not(.text-right) {
        text-align: left;
      }
    }
  }

  // Bottom padding for stacked control labels
  .control-label {
    @media (min-width: @screen-xs) {
      &[class*=col-xs-] {
        padding-top: (@padding-base-vertical + 1);
      }
    }

    @media (min-width: @screen-md) {
      &[class*=col-md-] {
        padding-top: (@padding-base-vertical + 1);
      }
    }

    @media (min-width: @screen-sm) {
      &[class*=col-sm-] {
        padding-top: (@padding-base-vertical + 1);
      }
    }

    @media (min-width: @screen-lg) {
      &[class*=col-lg-] {
        padding-top: (@padding-base-vertical + 1);
      }
    }
  }

  // Validation state icons
  .has-feedback {
    > .form-control-feedback {
      right: 0;
    }
  }
  .has-feedback-left {
    .form-control-feedback {
      right: auto;
      left: (@grid-gutter-width / 2);
    }

    > .form-control-feedback {
      left: 0;
    }
  }

  //
  // Form group sizes
  //

  // XLarge
  .form-group-xlg {
    @media (min-width: @screen-sm-min) {
      .control-label {
        font-size: @font-size-xlarge;
        padding-top: (@padding-xlarge-vertical + 1);
      }
    }
  }

  // Large
  .form-group-lg {
    @media (min-width: @screen-sm-min) {
      .control-label {
        padding-top: (@padding-large-vertical + 1);
      }
    }
  }

  // Small
  .form-group-sm {
    @media (min-width: @screen-sm-min) {
      .control-label {
        padding-top: (@padding-small-vertical + 1);
      }
    }
  }

  // Mini
  .form-group-xs {
    @media (min-width: @screen-sm-min) {
      .control-label {
        font-size: @font-size-small;
        padding-top: (@padding-xs-vertical + 1);
      }
    }
  }
}
